<template>
  <div class="stock-detail" v-if="detail">
    <p>{{ detail.album }}</p>
    <input type="text" :value="detail.number" ref="input" />
    <button @click="edit">修改</button>
  </div>
</template>

<script>
import albumList from "./albumList";
export default {
  data() {
    return {
      id: this.$route.params.id,
      list: [],
      detail: null,
    };
  },
  created() {
    this.getDetail();
  },
  watch: {
    $route(newRoute, oldRoute) {
      if (newRoute.name === "stockDetail" && oldRoute.name === "stockDetail") {
        console.log(this.$route);
        this.id = newRoute.params.id;
        this.getDetail();
      }
    },
  },
  methods: {
    getDetail() {
      const storageList = localStorage.getItem("stock-list");
      this.list = storageList ? JSON.parse(storageList) : albumList;
      if ( !this.id) this.$router.back();
      this.detail = this.list.find((i) => i.id === this.id);
      if (!this.detail) this.$router.go(-1);
    },
    edit() {
      const { value } = this.$refs.input;
      this.detail.number = value;
      localStorage.setItem("stock-list", JSON.stringify(this.list));
      this.$router.back();
    },
  },
};
</script>
